<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>消费项管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script th:src="@{/plugin/jquery/jquery-3.4.1.js}" charset="utf-8"></script>
  <link rel="stylesheet" th:href="@{/plugin/layui/css/layui.css}">
  <script type="text/javascript" th:src="@{/plugin/layui/layui.js}"></script>
</head>

<body style="padding: 20px;">
  <!-- 页面结构 -->
  <div class="layui-main">
    <!-- 表格上方标题 -->
    <blockquote class="layui-elem-quote">消费项列表</blockquote>
    <!-- 添加按钮 -->
    <a class="layui-btn layui-btn-sm" id="add-citem-btn" lay-event="" >添加消费项</a>
    <!--消费项表 -->
    <table id="citem-tbl" lay-filter="citem-tbl" ></table>
	
    <script type="text/html" id="citem-tbl-toolbar">
      <a class="layui-btn layui-btn-xs" lay-event="updateCItem">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteCItem">删除</a>
    </script>
  </div>
  
  <!-- 添加弹出层 -->
  <div id="add-citem-layer" style="display: none; padding:20px" >
    <form id="add-citem-form" class="layui-form layui-form-pane">
      <div class="layui-form-item">
        <label class="layui-form-label">消费项名称</label>
        <div class="layui-input-block">
          <input type="text" id="add_citem_name" name="consumer_item_name" class="layui-input" lay-verify="required" autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
	  	<label class="layui-form-label">消费类型</label>
	    <div class="layui-input-inline">
			<select id="add-ctype" name="consumerTypeId" class="select" lay-verify="required">
				
			</select>
	    </div>
	  </div>
      <div class="layui-form-item">
        <label class="layui-form-label">定价</label>
        <div class="layui-input-block">
          <input type="text" id="add_price" name="price" class="layui-input"  autocomplete="off">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="add-citem-form-submit">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  
  <!-- 更新用户弹出层 -->
  <div id="update-citem-layer" style="display: none; padding: 20px">
    <form id="update-citem-form" class="layui-form layui-form-pane" lay-filter="update-citem-form">
      <div class="layui-form-item" >
        <label class="layui-form-label">序号</label>
        <div class="layui-input-block">
          <input type="text" name="consumer_item_id" id="up_id" class="layui-input" readonly>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">消费项名称</label>
        <div class="layui-input-block">
          <input type="text" name="consumer_item_name" id="up_citem_name" class="layui-input" lay-verify="required" autocomplete="off" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">定价</label>
        <div class="layui-input-block">
          <input type="text" name="price" id="up_price" class="layui-input" lay-verify="required">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">消费类型</label>
	    <div class="layui-input-inline">
			<select id="up_ctype" name="consumerType.type_id" class="select" lay-verify="required">
				
			</select>
	    </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="update-citem-form-submit">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 页面JS -->
  <script>
    layui.use(['jquery', 'table', 'layer', 'form'], function() {
      // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
      var $ = layui.$;
      var table = layui.table;
      var layer = layui.layer;
      var form = layui.form;
      
      // 显示所有用户
      table.render({
        elem: '#citem-tbl',
        url: '[[@{/consumeritem/getall}]]',//请求地址
        method: 'get',
        cols: [ [
          {type:'checkbox',title:"选择"},
          {field: 'consumer_item_id', title: '序号',sort:true},
          {field: 'consumer_item_name', title: '消费项名称'},
          {templet:function(data){
        	  return data.consumerType.type_name;
          },title:'消费类型'},
          {field: 'price', title: '定价（元）',sort:true},
          {toolbar: '#citem-tbl-toolbar', title: '操作'}
        ] ],
        // 表格容器id，用于表格重载
        id: 'citem-tbl',
      });
      
      // 显示添加用户弹出层
      $('#add-citem-btn').click(function() {
        // 每次显示前重置表单
        $('#add-citem-form')[0].reset();
        querySelect();
        layer.open({
          type: 1,
          title: '添加消费项',
          skin: 'layui-layer-molv',
          area: ['600px'],
          content: $('#add-citem-layer')
        });
      });
      //

      // 添加用户表单提交
      form.on('submit(add-citem-form-submit)', function(data) {
    	if(isNaN($("#add_price").val())){
    		layer.msg("价格必须为数字，请检查");
    		return false;
    	}
        // ajax方式添加用户
        $.ajax({
          url: "[[@{/consumeritem/insertOne}]]",
          type: "POST",
          data: {
        	 consumer_item_name:$("#add_citem_name").val(),
             "consumerType.type_id":$("#add-ctype").val(),
        	 price:$("#add_price").val()
          },
          //contentType: 'application/json',
          dataType: 'json',
          success: function(data) {
            if (data.code == 1) {
              layer.close(layer.index);
              layer.msg(data.msg);
              table.reload('citem-tbl');
            } else {
              layer.msg(data.msg);
            }
          },
          error: function() {
            console.log("ajax error");
          }
        });
        // 阻止表单跳转
        return false;
      });
      
      // 监听行工具栏事件：删除消费项与更新消费项
      table.on('tool(citem-tbl)', function(obj) {
        // 获取当前行数据和lay-event的值
        var data = obj.data;
        var event = obj.event;
        
        // 删除消费项事件
        if (event === 'deleteCItem') {
          layer.confirm('确定删除该消费项吗？', function(index) {
            // ajax方式删除消费项
            $.ajax({
              url:'[[@{/consumeritem/delete}]]',
              type: "POST",
              data:{
            	consumer_item_id:data.consumer_item_id	  
              },
              dataType: 'json',
              success: function(data) {
                if (data.code == 1) {
                  layer.msg(data.msg);
                  table.reload('citem-tbl');
                } else {
                  layer.msg(data.msg);
                }
              },
              error: function() {
                console.log("ajax error");
              }
            });
            layer.close(index);
          });
        }
        
        // 更新事件 修改
        if (event === 'updateCItem') {
          //更新下拉选项列
          querySelect();
          // 每次显示更新用户的表单前自动为表单填写该行的数据
          form.val('update-citem-form', {
            "consumer_item_id": data.consumer_item_id,
            "consumer_item_name": data.consumer_item_name,
            "price": data.price,
            "consumerType.type_id": data.consumerType.type_id,
          });
          // 显示更新用户表单的弹出层
          layer.open({
            type: 1,
            title: '修改',
            skin: 'layui-layer-molv',
            area: ['500px'],
            content: $('#update-citem-layer')
          });
          // 更新用户表单提交
          form.on('submit(update-citem-form-submit)',function(data) {
        	if(isNaN($("#up_price").val())){
          		layer.msg("价格必须为数字，请检查");
          		return false;
          	}
            // ajax方式更新POS机
            $.ajax({
              url:"[[@{/consumeritem/updateOne}]]",
              type:"POST",
              data:{
            	  consumer_item_id:$("#up_id").val(),
            	  consumer_item_name:$("#up_citem_name").val(),
            	  price:$("#up_price").val(),
                  "consumerType.type_id":$("#up_ctype").val()
              },
              dataType:'json',
              success:function(data) {
                if (data.code == 1) {
                  layer.close(layer.index);
                  layer.msg(data.msg);
                  table.reload('citem-tbl');
                } else {
                  layer.msg(data.msg);
                }
              },
              error: function() {
                console.log("ajax error");
              }
            });
            // 阻止表单跳转
            return false;
          });
        }
      });
    });
    //更新本页所有下拉选项
    function querySelect(){
    	var text ="";
        	$.ajax({
	            type:"POST",
	            url:'[[@{/consumertype/getall}]]',  //从数据库查询所有消费类型
	            dataType: "json",
	            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	            async: false,
	            cache: false,
	            success: function (data) {
	            	for(var i=0;i<data.data.length;i++){
	            		text += "<option value="+data.data[i].type_id+">"+data.data[i].type_name+"</option>";
	            	}
	                $("#up_ctype").html(text);   
	                $("#add-ctype").html(text);
	            }
	           
       		});
    }
  </script>
</body>

</html>